<template>
  <div class="choice">
    <h2>洗牌次数: {{this.count}}</h2>
    <button @click="stuSort">洗牌</button>&nbsp;
    <input type="number" placeholder="请输入选中人数" v-model="selectNum">&nbsp;
    <button @click="sureSelect">确认</button>&nbsp;
    <button @click="reset">重置</button>
    <transition-group tag="div" class="cards">
      <div v-for="stu in students" :key="stu.stuNumber" class="card" @mouseenter="enter(stu.stuNumber)" @mouseleave="leave(stu.name)">{{ stu.name }}</div>
    </transition-group>
    <h2>{{message}}</h2>
  </div>
</template>

<script>
import stuData from '../assets/js/data'
import { upset, cutOut } from '../utils/funcTools'
export default {
  data() {
    return {
      students: stuData,
      count: 0,
      message: '',
      time: 0,
      selectNum: ''
    }
  },
  methods: {
    stuSort() {
      if (this.students.length === 1) {
        return alert("就一个人, 你洗个锤子牌哦 !")
      }
      // 节流处理
      if (this.time) {
        if (new Date().getTime() - this.time < 2400) {
          return
        }
      }
      this.time = new Date().getTime()
      upset(this.students)
      this.message = "开始洗牌......"
      setTimeout(() => {
        upset(this.students)
        this.count++
        localStorage.setItem('count', this.count)
        if (this.students.length === 32) {
          localStorage.setItem('studentsData', JSON.stringify(this.students))
        }
      }, 900)
      setTimeout(() => {
        this.message = '洗牌完成 !'
      }, 1900)
      setTimeout(() => {
        this.message = ''
        this.time = 0
      }, 2400)
    },
    sureSelect() {
      if (!this.selectNum) {
        return alert("请输入选中人数 !")
      } else if (this.selectNum <= 0) {
        return alert("不能输入小于零的数 !")
      } else if (this.selectNum >= this.students.length) {
        return alert("输入人数应小于总人数 !")
      }
      cutOut(this.students, this.selectNum)
      setTimeout(() => {
        let res = ""
        this.students.forEach(item => {
          res += item.name + " "
        })
        alert(res)
      }, 1200)
    },
    reset() {
      if(confirm("确定重置吗?")) {
        localStorage.clear()
        location.reload()
      }
    },
    enter(id) {
      event.target.innerHTML = id
    },
    leave(name) {
      event.target.innerHTML = name
    }
  },
  mounted() {
    this.count = localStorage.getItem('count') ? localStorage.getItem('count') : this.count
    this.students = JSON.parse(localStorage.getItem('studentsData')) ? JSON.parse(localStorage.getItem('studentsData')) : this.students
  },
}
</script>

<style scoped>
.choice {
  width: 1342px;
  padding: 10px;
  text-align: center;
  margin: 30px auto;
  background-color: #bfa;
  border-radius: 20px;
  box-shadow: 0 0 10px #666;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.card {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  background-color: rgba(246, 237, 237, 0.815);
  box-shadow: 0 0 3px rgba(255, 0, 0, 0.6);
  cursor: pointer;
}
.card:hover {
  background-color: rgb(219, 204, 207);
}
.v-move {
  transition: all 1s ease-in-out;
}
.v-leave-to {
  opacity: 0;
  height: 0;
  /* position: absolute; */
}
.v-leave-active {
  transition: opacity 1s ease;
}
</style>